<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			Vue模板语法有2大类（牢牢掌握）：
				1.插值语法：
						功能：用于解析标签体内容。
						写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
				2.指令语法：
						功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
						举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
								且可以直接读取到data中的所有属性。
						备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
		 -->
		<!-- 准备好一个容器 -->
		<div id="root">
			<h2>插值语法</h2>
			<h3>你好，{{name}}</h3>
			<hr>
			<h2>指令语法</h2>
			<a v-bind:href="url" v-bind:x="number" :y="100+100">点我去{{school}}学习1</a>
			<a :href="url.toUpperCase()" :x="number" y="100+100">点我去尚硅谷学习2</a>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			new Vue({
				el:'#root',
				data:{
					name:'jack',
					school:'尚硅谷',
					url:'http://www.atguigu.com/',
					number:800
				}
			})
		</script>

	</body>
</html>